<template>
	<div class="my_structure" id="structure-box">
		<!-- <ul v-for="list in arr">
			<li>
				<label>{{list.name}}</label>
				<template v-if="list.children">
					<ul v-for="list2 in list.children">
						<li>
							<label>{{list2.name}}</label>
							<template v-if="list2.children">
								<ul v-for="list3 in list2.children">
									<li>
										<label>{{list3.name}}</label>
										<template v-if="list3.children">
											<ul v-for="list4 in list3.children">
												<li>
													<label>{{list4.name}}</label>
													<template v-if="list4.children">
														<ul v-for="list5 in list4.children">
															<li>
																<label>{{list5.name}}</label>
															</li>
														</ul>
													</template>
												</li>
											</ul>
										</template>
									</li>
								</ul>
							</template>
						</li>
					</ul>
				</template>
			</li>
		</ul> -->
		<!-- <p class="noData" style="text-align: left;">注：当前仅支持5级树结构！</p> -->
	</div>
</template>

<script>
import axios from 'axios'
import { mapState } from 'vuex'
export default {
	data(){
		return {
		}
	},
	computed: mapState(['userInfo']),
	methods: {
		//获取并重组用户列表
		reset_userList(){
			axios.post($base + 'users/userList', {
				teamId: this.userInfo.teamId
			}).then(json => {
				///////输出组织结构//////
				function treeMenu(a){
				    this.tree=a||[];
				    this.groups={};
				};
				treeMenu.prototype={
				    init:function(n){
				        this.group();
				        return this.getDom(this.groups[n]);
				    },
				    group: function(){
				        for(var i=0;i<this.tree.length;i++){
				            if(this.groups[this.tree[i].leader]){
				                this.groups[this.tree[i].leader].push(this.tree[i]);
				            }else{
				                this.groups[this.tree[i].leader]=[];
				                this.groups[this.tree[i].leader].push(this.tree[i]);
				            }
				        }
				    },
				    getDom: function(a){
				        if(!a){return ''}
				        var html='\n<ul >\n';
				        for(var i=0;i<a.length;i++){
				            html+='<li><label>'+a[i].userName+'</label>';
				            html+=this.getDom(this.groups[a[i].mobile]);
				            html+='</li>\n';
				        };
				        html+='</ul>\n';
				        return html;
				    }
				};
				var html = new treeMenu(json.data).init(0);

				document.getElementById('structure-box').innerHTML = html;
			}).catch(json => {
				console.log(json)
			})
		}
	},
	mounted(){
		this.reset_userList();
	}
}
</script>